<template>
  <div class="login-body">
    <div class="content" style="">
      <div class="logo">
        <!--<img src="./images/logo.png" alt="">-->
      </div>
      <div class="loginWarp"
           v-loading="load_data"
           element-loading-text="正在登陆中..."
           @keyup.enter="submit_form">
        <div class="login-title">
          <!--<img src="http://ophdr3ukd.bkt.clouddn.com/logo.png"/>-->
        </div>
        <div class="login-form">
          <el-form class="banner_words">
            <h1>小白机器人</h1>
          </el-form>
          <el-form ref="form" :model="form" :rules="rules" label-width="0">
            <el-form-item prop="username" class="login-item">
              <el-input v-model="form.username" placeholder="请输入账户名：" class="form-input" :autofocus="true"></el-input>
            </el-form-item>
            <el-form-item prop="password" class="login-item">
              <el-input type="password" v-model="form.password" placeholder="请输入账户密码：" class="form-input"></el-input>
            </el-form-item>
            <el-form-item class="login-item">
              <el-button size="large" icon="check" class="form-submit" @click="submit_form">登 录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="h_detail" style="">
      <span>Copyright © 2018 码码 All Rights Reserved</span>
    </div>
  </div>
</template>
<script type="text/javascript">
  import {mapActions} from 'vuex'
  import {port_user, port_code} from 'common/port_uri'
  import {SET_USER_INFO} from 'store/actions/type'
  import {cookieStorage} from 'common/storage'
  import {sessionStorage} from 'common/storage'
  import {functionCodes} from 'common/config'


  export default {
    data() {
      return {
        form: {
          username: null,
          password: null
        },
        rules: {
          username: [{required: true, message: '请输入账户名！', trigger: 'blur'}],
          password: [{required: true, message: '请输入账户密码！', trigger: 'blur'}]
        },
        //请求时的loading效果
        load_data: false
      }
    },
    methods: {
      ...mapActions({
        set_user_info: SET_USER_INFO
      }),
      //提交
      submit_form() {
        this.$refs.form.validate((valid) => {
          if (!valid) return false
          this.load_data = true
          //登录提交
          this.$fetch.api_user.login(this.form)
            .then(({code, data, message}) => {
              console.log(arguments);
              if (code === 200) {

                this.set_user_info({
                  user: data,
                  login: true
                })
                //获取data 的 function code  展示菜单
                cookieStorage.set("functionCodes", data.functionCodes);

                this.$message.success("欢迎进入小白机器人后台")
                setTimeout(this.$router.push({path: '/'}), 500)
              } else {
                this.$message.alert(message)
                this.load_data = false
              }
            })
            .catch(({code, message, data}) => {
              // debugger
              this.load_data = false
              this.$notify.info({
                title: '温馨提示',
                message: message
              })
            })
        })
      }
    }
  }
</script>
<style lang="scss" type="text/scss" rel="stylesheet/scss">


  .login-body {
    .el-form-item.is-success .el-input__inner:focus {
      border-color: #7382bf;
    }
    .h_detail {
      position: absolute;
      bottom: 20px;
      text-align: center;
      width: 100%;
      color: #fff
    }
    .logo {
      margin-bottom: 15px;
      text-align: center;
    }
    .content {
      width: 330px;
      position: absolute;
      top: 50%;
      margin-top: -245px;
      left: 50%;
      margin-left: -165px;
    }
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(./images/login_bg.jpg) no-repeat center;
    background-size: cover;
    .loginWarp {
      width: 300px;
      padding: 25px 15px;
      /*margin: 100px auto;*/
      background-color: #fff;
      border-radius: 5px;
      .login-title {
        margin-bottom: 25px;
        text-align: center;
      }
      .login-item {
        .el-input__inner {
          margin: 0 !important;
        }
      }

      .login-form {
        .banner_words {
          text-align: center;
          h1 {
            color: #999;
            text-align: center;
            font-size: 16px;
            font-weight: normal;
            margin-bottom: 22px;
            letter-spacing: 0.25em;
          }
        }
      }

      .form-input {
        input {
          margin-bottom: 15px;
          font-size: 12px;
          height: 40px;
          border: 1px solid #eaeaec;
          background: #eaeaec;
          border-radius: 5px;
          color: #555;
        }
      }
      .form-submit {
        width: 100%;
        color: #fff;
        border-color: #5b6799;
        background: #5b6799;
        &:active, &:hover {
          border-color: #7382bf;
          background: #7382bf;
        }
      }
    }
  }
</style>
